import {LogoutOutlined, SettingOutlined, UserOutlined} from '@ant-design/icons'
import {useEmotionCss} from '@ant-design/use-emotion-css'
import {history, useModel} from '@umijs/max'
import {Avatar, message, Spin} from 'antd'
import type {MenuInfo} from 'rc-menu/lib/interface'
import React, {useCallback, useEffect} from 'react'
import {flushSync} from 'react-dom'
import HeaderDropdown from '../HeaderDropdown'
import {useWebSocket} from "ahooks";
import {kfModel} from "@/models/KfModel";

export type GlobalHeaderRightProps = {
    menu?: boolean
}

// export let webSocketInstance: WebSocket | undefined

const Name = () => {
    const {initialState} = useModel('@@initialState')
    const {userinfo} = initialState || {}




    const nameClassName = useEmotionCss(({token}) => {
        return {
            // width: '70px',
            height: '48px',
            overflow: 'hidden',
            lineHeight: '48px',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            [`@media only screen and (max-width: ${token.screenMD}px)`]: {
                display: 'none',
            },
        }
    })

    return <span className={`${nameClassName} anticon`}>{userinfo?.userName}</span>
}

const AvatarLogo = () => {
    const {initialState} = useModel('@@initialState')
    const {userinfo} = initialState || {}

    const avatarClassName = useEmotionCss(({token}) => {
        return {
            marginRight: '8px',
            // color: token.colorPrimary,
            verticalAlign: 'top',
            // background: setAlpha(token.colorBgContainer, 0.85),
            [`@media only screen and (max-width: ${token.screenMD}px)`]: {
                margin: 0,
            },
        }
    })

    return (
        <Avatar size="small" className={avatarClassName} alt="avatar">
            {userinfo?.userName.slice(0, 1)}
        </Avatar>
    )
}

const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
    /**
     * 退出登录，并且将当前的 url 保存
     */
    const loginOut = async () => {
        history.replace({
            pathname: '/user/login',
        })
        // const {search, pathname} = window.location;
        // const urlParams = new URL(window.location.href).searchParams;
        // /** 此方法会跳转到 redirect 参数所在的位置 */
        // const redirect = urlParams.get('redirect');
        // // Note: There may be security issues, please note
        // if (window.location.pathname !== '/user/login' && !redirect) {
        //   history.replace({
        //     pathname: '/user/login',
        //     search: stringify({
        //       redirect: pathname + search,
        //     }),
        //   });
        // }
    }
    /**
     * 个人中心页
     */

    const actionClassName = useEmotionCss(({token}) => {
        return {
            display: 'flex',
            height: '48px',
            marginLeft: 'auto',
            overflow: 'hidden',
            alignItems: 'center',
            padding: '0 8px',
            cursor: 'pointer',
            borderRadius: token.borderRadius,
            '&:hover': {
                backgroundColor: token.colorBgTextHover,
            },
        }
    })
    const {initialState, setInitialState} = useModel('@@initialState')

    const onMenuClick = useCallback(
        (event: MenuInfo) => {
            const {key} = event
            if (key === 'logout') {
                flushSync(() => {
                    setInitialState((s) => ({...s, userinfo: undefined}))
                })
                loginOut()
                return
            }
            // history.push(`/account/${key}`);
            history.push('/setting/usercenter')
        },
        [setInitialState],
    )

    const loading = (
        <span className={actionClassName}>
      <Spin
          size="small"
          style={{
              marginLeft: 8,
              marginRight: 8,
          }}
      />
    </span>
    )

    if (!initialState) {
        return loading
    }

    const {userinfo} = initialState

    if (!userinfo || !userinfo.userName) {
        return loading
    }

    const menuItems = [
        ...(menu
            ? [
                {
                    key: 'center',
                    icon: <UserOutlined/>,
                    label: '个人中心',
                },
                {
                    key: 'settings',
                    icon: <SettingOutlined/>,
                    label: '个人设置',
                },
                {
                    type: 'divider' as const,
                },
            ]
            : []),
        {
            key: 'usercenter',
            icon: <UserOutlined/>,
            label: '个人中心',
        },
        {
            key: 'logout',
            icon: <LogoutOutlined/>,
            label: '退出登录',
        },
    ]

    return (
        <HeaderDropdown
            menu={{
                selectedKeys: [],
                onClick: onMenuClick,
                items: menuItems,
            }}
        >
      <span className={actionClassName}>
        <AvatarLogo/>
        <Name/>
      </span>
        </HeaderDropdown>
    )
}

export default AvatarDropdown
